<template>
  <div v-if="isLoaded" style="width: 100%; height: 100%" class="wrap">
    <div class="wrap-left">
      <el-input
        v-model="filterText"
        placeholder="输入关键字进行过滤"
      />
      <el-tree
        ref="deviceTree"
        class="filter-tree"
        :data="deviceData"
        default-expand-all
        :filter-node-method="filterNode"
        :render-content="renderContent"
      />
    </div>
    <div class="wrap-center">
      <div id="video-wrap" class="video-wrap">
        <div v-if="onlyOneVideo" class="video-one-wrap">
          <div class="video-title">{{ oneData.deviceName }}</div>
          <div class="one-video">
            <iframe :src="baseUrl+'?id='+oneData.id" class="iframe" />
            <div class="video-mark" />
          </div>
        </div>

        <div v-if="!onlyOneVideo" class="video-muit-wrap">
          <div v-for="(item,index) in selectData" :key="index" class="video-item-wrap">
            <div v-if="item === null" class="video-item">
              <div class="video-item-iframe">
                <span>{{ selectDataLabel[index] }}</span>
              </div>
              <div class="video-muit-title" />
            </div>
            <div v-if="item" class="video-item">
              <div class="video-item-iframe">
                <iframe :src="baseUrl+'?id='+item.id" class="iframe" />
                <div class="video-mark" @dblclick="prewVideoDialog(item.id)" />
              </div>
              <div class="video-muit-title">{{ item.deviceName }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-wrap">
        <span class="am-icon" :class="onlyOneVideo && 'active'" @click="checkScreenTab(true)">单屏</span>
        <span class="am-icon" :class="!onlyOneVideo && 'active'" @click="checkScreenTab(false)">多屏</span>
        <span class="am-icon">截图</span>
      </div>
    </div>
    <div class="wrap-right">
      <div>2234</div>
    </div>

    <div id="tabItemContextWrap">
      <div v-show="contextMenuItemVisible" class="conetextUl contextmenu">
        <div @click="addToSelectVideo(1000000)">关闭</div>
        <div v-for="(item,index) in selectDataLabel" :key="index" @click="addToSelectVideo(index)">{{ selectData[index] === null ? '添加' : '替换' }}{{ item }}</div>
        <div @click="clearAllSelectVideo">清楚所有</div>
      </div>
    </div>

  </div>
</template>
<script>

import { queryAllByPage } from '../../../../api/deviceInfo'

export default {
  name: 'VideoMonitor',
  components: {},
  data() {
    const baseUrl = `${window.location.protocol}//${window.location.host}/video/video.html`
    return {
      scale: 9 / 16,
      onlyOneVideo: true,
      baseUrl: baseUrl,
      isLoaded: false,
      filterText: '',
      oneData: [],
      selectDataLabel: ['通道一', '通道二', '通道三', '通道四'],
      selectData: [null, null, null, null], // 通道数据
      deviceData: [],
      deviceOriginData: [],
      contextMenuItemVisible: false

    }
  },
  watch: {
    filterText(val) {
      this.$refs.deviceTree.filter(val)
    },
    onlyOneVideo(val) {
      setTimeout(() => {
        this.changeVideoSize()
      }, 30)
    }
  },
  created() {
    queryAllByPage({ pageNum: -1, deviceType: 3 }).then(res => {
      const map = {}
      this.deviceOriginData = res.data
      res.data.forEach(item => {
        if (!(map[item.belongToArea] instanceof Array)) {
          map[item.belongToArea] = []
        }
        map[item.belongToArea].push(item)
      })

      let item, tempItem
      const resArr = []
      let id = 10000000
      let firstItem = null
      for (const str in map) {
        item = { id: ++id, label: str, children: [] }
        if (map[str] instanceof Array) {
          map[str].forEach(innerItem => {
            if (!firstItem) firstItem = innerItem
            tempItem = { ...innerItem, label: innerItem.deviceName }
            item.children.push(tempItem)
          })
        }
        resArr.push(item)
      }
      this.oneData = firstItem
      this.deviceData = resArr
      this.isLoaded = true
      setTimeout(() => {
        this.changeVideoSize()
        this.addTreeContextMenu()
        this.addMarkerTab()
      }, 100)
    })
  },
  mounted() {

  },
  methods: {
    changeVideoSize() {
      const sty = this.sty()
      if (this.onlyOneVideo) {
        const videoWrap = document.getElementById('video-wrap')
        let width = sty(videoWrap, 'width')
        width = width.replace('px', '')
        width = parseInt(width)
        const height = width * this.scale
        document.getElementsByClassName('one-video')[0].style.height = `${height}px`
      } else {
        // video-item
        const allVideoItem = document.getElementsByClassName('video-item-iframe')
        let width = sty(allVideoItem[0], 'width')
        width = width.replace('px', '')
        width = parseInt(width)
        const height = width * this.scale
        for (let i = 0; i < allVideoItem.length; ++i) {
          allVideoItem[i].style.height = `${height}px`
        }
      }
    },

    sty() {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      } else {
        return (dom, attr) => getComputedStyle(dom, false)[attr]
      }
    },

    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

    addTreeContextMenu() {
      const allMenu = document.getElementsByClassName('treeItemContextMenu')
      for (let i = 0; i < allMenu.length; ++i) {
        allMenu[i].oncontextmenu = (e) => {
          const id = allMenu[i].getAttribute('data-id')
          this.tempSelectId = id
          e.preventDefault()
          this.contextMenuClick(e, id)
        }
        allMenu[i].onclick = (e) => {
          const id = allMenu[i].getAttribute('data-id')
          this.oneData = this.selectDeviceById(id)
          this.onlyOneVideo = true
          e.preventDefault()
        }
      }
    },

    contextMenuClick(e, id) {
      const sty = this.sty()
      const dragDom = document.getElementsByClassName('am-drag-wrap')[0]
      let wrapLeft = sty(dragDom, 'left')
      let wrapTop = sty(dragDom, 'top')
      wrapTop = wrapTop.replace('px', '')
      wrapLeft = wrapLeft.replace('px', '')
      const left = e.clientX - wrapLeft - 10
      const top = e.clientY - wrapTop - 10
      const oWrap = document.getElementById('tabItemContextWrap')
      oWrap.style.cssText += `;top:${top}px;left:${left}px`
      this.contextMenuItemVisible = true
    },

    addToSelectVideo(index) {
      if (index < 10000) {
        this.selectData[index] = this.selectDeviceById(this.tempSelectId)
        this.onlyOneVideo = false
      }
      this.contextMenuItemVisible = false
    },

    clearAllSelectVideo() {
      this.selectData = [null, null, null, null]
      this.contextMenuItemVisible = false
    },

    addMarkerTab() {
      const allVideoMarker = document.getElementsByClassName('video-mark')
      for (let i = 0; i < allVideoMarker.length; ++i) {
        allVideoMarker[i].ondblclick = () => {
          this.prewVideoDialog(this.oneData.id)
        }
      }
    },

    prewVideoDialog(id) {
      this.$bus.emit('prewVideoDialog', { src: this.baseUrl + '?id=' + id })
    },

    selectDeviceById(id) {
      let res = null
      this.deviceOriginData.map((item) => {
        if (parseInt(item.id) === parseInt(id)) {
          res = item
        }
      })
      return res
    },
    // 切换多屏和单屏
    checkScreenTab(onlyOneVideo) {
      if (this.onlyOneVideo === onlyOneVideo) return
      this.onlyOneVideo = onlyOneVideo

      /* setTimeout(() => {
        this.changeVideoSize()
      }, 50)*/
    },
    renderContent(h, { node, data, store }) {
      let className = 'treeItem'
      if (node.level > 1) {
        className += ' treeItemContextMenu'
      }
      return (
        <div class={className} data-id={data.id} style={{ width: '100%' }}>
          <span>{data.label}</span>
        </div>)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/variables.scss";

  .wrap {
    display: flex;
    flex-direction: row;
  }

  .el-dialog--center {
    margin: 0
  }

  .iframe {
    border: none;
    width: 100%;
    height: 100%;
  }

  .wrap-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 12px;

    .video-wrap {
      flex: 1;
      background-color: #000;
      overflow-y: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .video-one-wrap{
        width: 100%;
      }

      .one-video {
        width: 100%;
        position: relative;

        .video-mark {
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }

      .video-title {
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        height: 24px;
        line-height: 24px;
        margin-bottom: 4px;
      }

      .video-muit-wrap{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        color: #fff;
        .video-item-wrap{
          //margin:5px;
          background-color: #000;
          width:50%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          .video-item{
            flex:1;
            margin:5px;
          }
          .video-item-iframe{
            width: 100%;
            flex:1;
            border:1px solid #fff;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            position: relative;
            .video-mark {
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }

        }

        .video-muit-title{
          height: 24px;
          line-height: 24px;
          font-size: 14px;
          color: #fff;
        }
      }
    }

    .bottom-wrap {
      width: 100%;
      height: 30px;
      border-bottom: 1px solid $nodeBorderColor;
      color: white;

      span.am-icon {
        display: inline-block;
        line-height: 30px;
        font-size: 12px;
        padding: 0 10px;
        margin: 0 20px;
        border-left: 1px solid $nodeBorderColor;
        border-right: 1px solid $nodeBorderColor;
        cursor: pointer;
      }

      span.active {
        background-color: $hoverColor;
      }

    }
  }

  .wrap-left {
    height: 100%;
    width: 150px;
    overflow-y: auto;
  }

  .wrap-right {
    width: 150px;
    height: 100%;
  }

  #tabItemContextWrap {
    position: absolute;
    top: -9000px;
    left: -9000px;
    z-index: 10000;
    background-color: $nodeBk;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .55);

    .contextmenu {
      margin: 0;

      div {
        padding-left: 10px;
        padding-right: 20px;
        border-bottom: 1px solid $nodeBorderColor;
        line-height: 30px;
        height: 30px;
        font-size: 14px;
        color: $fontWhiteColor;
        cursor: pointer;

        &:hover {
          background-color: $hoverColor;
        }
      }

    }
  }
</style>
